<template>
  <div>
    <el-dialog title="导入订单信息" :visible.sync="dialogTableVisible" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="mini">
        <el-row :gutter="20" style="margin-top:10px">
          <el-col :span="24">
            <el-form-item label="项目组" prop="projectId">
              <el-select v-model="form.projectId" style="width: 100%" @change="projectChange">
                <el-option v-for="item in projectList" placeholder="请选择" style="width: 100%" :key="item.projectId"
                  :label="item.projectName" :value="item.projectId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="合同名称">
              <el-input v-model="form.name" placeholder="选择项目组自动填写" style="width: 100%" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据上传">
              <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
                :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                  <span>仅允许导入xls、xlsx格式文件。</span>
                  <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                    @click="importTemplate">下载模板</el-link>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "importInfo",
  components: {

  },
  props: {
    projectList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      form: {
        project: null,
        name: null,
      },
      rules: {
 
        projectId: [{
              required: true,
              message: "请选择项目组",
              trigger: "blur"
          }],
      },
      buttonLoading: false,
      dialogTableVisible: false,
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          //Authorization: "Bearer " + getToken()
        },
        // 上传的地址
        url: "/system/user/importData"
      },

    };
  },
  methods: {
    projectChange(p){
      let obj = this.projectList.filter(v=>{
        return v.projectId == p
      })[0]
     // this.form = obj
    this.form.projectName = obj.projectName
      this.form.name = obj.name
      this.form.code = obj.code
      this.form.dep = obj.dep
      this.form.money = obj.money
      this.form.workload = obj.workload
      this.form.serviceStartTime = obj.serviceStartTime
      this.form.serviceEndTime = obj.serviceEndTime
    },
    initImport() {
      this.form = {}
      this.buttonLoading = false;
      this.dialogTableVisible = true
    },
    /** 下载模板操作 */
    importTemplate() {
      let a = document.createElement('a') // 创建a标签
      a.href = 'infoLibrary.xlsx' // 文件路径 设置下载文件地址 注意：使用英文
      // Vue2.0版本可以这样写
      // Vue3.0需要把文件Excel文件放在public/static文件目录下 这样的话这里写对应路径就可以了
 
      a.download = 'infoLibrary.xlsx' // 设置下载文件文件名
      a.style.display = 'none' // 隐藏a标签
      document.body.appendChild(a) //将a标签追加到文档对象中
      a.click() // 点击,浏览器自动下载
      a.remove()//删除元素
      //this.download( 'system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx` )
    },
    // 文件上传中处理
    handleFileUploadProgress( event, file, fileList ) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess( response, file, fileList ) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert( "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response
        .msg + "</div>", "导入结果", {
        dangerouslyUseHTMLString: true
      } );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;
                    this.$emit('submitForm',this.form)
                    setTimeout(()=>{
                      this.dialogTableVisible = false
                    },1000)
                   
                }
            });
    },
    cancel() {
      this.dialogTableVisible = false
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-upload .el-upload-dragger{
  width: 200px !important;
}
</style>